<template>
  <div class="full page">
    <img src="/images/bg-front.png" class="front" alt="" />
    <div class="center form-container">
      <div class="register" @click="toRegister">注册</div>
      <h2 class="t_center heading">登录</h2>
      <a-form
        layout="vertical"
        :model="formState"
        name="basic"
        autocomplete="off"
      >
        <a-form-item label="账户名" name="username">
          <a-input v-model:value="formState.username" class="input" />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="formState.password" class="input" />
        </a-form-item>

        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            class="btn"
            @click="submit"
            >开始学习</a-button
          >
        </a-form-item>
      </a-form>

      <div class="bottom-line"></div>
      <div class="left-line"></div>
      <div class="right-line"></div>
    </div>
    <div class="btn-group align-items_center">
      <div
        class="type-btn"
        :class="{ active: type === 'student' }"
        @click="toggleType('student')"
      >
        学生端
      </div>
      <div class="px_sm"></div>
      <div
        class="type-btn"
        :class="{ active: type === 'teacher' }"
        @click="toggleType('teacher')"
      >
        教师端
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const formState = reactive({
  username: '',
  password: '',
  confirmPassword: '',
});

const type = ref('student');

const toggleType = value => {
  type.value = value;
};

function submit() {
  if (type.value === 'student') {
    router.push({ path: '/page' });
  } else {
    router.push({ path: '/statistics' });
  }
}

function toRegister() {
  router.push({ path: '/register' });
}
</script>

<style lang="scss" scoped>
.page {
  background: #f5feff;
  background: url('/public/images/bg.png') center center/ cover no-repeat;
}
.form-container {
  min-width: 34%;
  background: red;
  border-radius: 16px;
  padding: 32px;
  background: rgba(255, 255, 255, 1);
  border: 20px solid #d1d1d1;
  color: rgba(57, 105, 163, 1);
  font-size: 20px;
  transform: translate(-26%, -60%);
  font-size: 20px;
}
.heading {
  color: rgba(57, 105, 163, 1);
  font-size: 40px;
  font-weight: 400;
}
.btn {
  display: block;
  width: 100%;
  padding: 16px;
  height: unset !important;
  border-radius: 16px;
  background: #f97260;
  border: 6px solid #fc7f37;
  font-size: 34px;
  font-weight: 400;
  color: #fff;
  &:hover {
    background: #f97260;
  }
}

.input {
  height: 60px;
}

.front {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  height: auto;
  z-index: 1;
}

.bottom-line {
  height: 20px;
  width: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -20px;
  background: #5db5e8;

  &:before {
    content: '';
    width: 40px;
    height: 40px;
    background-color: #5db5e8;
    clip-path: circle(50% at 0 0);
    position: absolute;
    left: -40px;
    transform: rotate(90deg);
  }
  &::after {
    content: '';
    width: 40px;
    height: 40px;
    background-color: #5db5e8;
    clip-path: circle(50% at 0 0);
    position: absolute;
    right: -40px;
  }
}

.left-line,
.right-line {
  height: 50%;
  width: 20px;
  position: absolute;
  bottom: 0px;
  background: #5db5e8;

  &::before {
    content: '';
    width: 20px;
    height: 10px;
    border-radius: 0 0 10px 10px;
    line-height: 10px;
    background-color: #5db5e8;
    position: absolute;
    top: -8px;
    left: 0;
    transform: rotate(180deg);
  }
}
.left-line {
  left: -20px;
}
.right-line {
  right: -20px;
}

.register {
  width: 60px;
  height: 60px;
  background: #2a9adb;
  color: #fff;
  position: absolute;
  right: -50px;
  top: -50px;
  line-height: 60px;
  font-size: 18px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.type-btn {
  font-size: 28px;
  color: #fff;
}
.active {
  color: #2a9adb;
}

.btn-group {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 16px;
  z-index: 9;
  cursor: pointer;
}
</style>
